<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-on:click="getProjects">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">
            <i class="el-icon-plus"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table :data="getProjectsList" v-loading="listLoading" stripe highlight-current-row>
      <!--项目负责人列表-->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix subtab_tit">
                  <span>项目负责人列表</span>
                </div>
                <el-table :data="scope.row.groupmembersList" stripe style="width: 100%" border>
                  <el-table-column type="index" width="40">
                  </el-table-column>
                  <el-table-column prop="renyuan" label="人员" width="100">
                  </el-table-column>
                  <el-table-column prop="xingming" label="姓名" width="100">
                  </el-table-column>
                  <el-table-column prop="company" label="公司" width="100">
                  </el-table-column>
                  <el-table-column prop="zhiwei" label="职务" width="200" :formatter="formatZhiwei">
                  </el-table-column>
                  <el-table-column prop="zhize" label="职责" :formatter="formatZhize">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="130">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" @click="handleEditUsers(scope.$index, scope.row)">
                        <i class="el-icon-edit"></i>
                      </el-button>
                      <el-button @click.native.prevent="handleUserDel(scope.$index, scope.row)" icon="el-icon-delete" size="small" type="danger"> </el-button>
                    </template>
                  </el-table-column>
                </el-table>

              </el-card>
            </el-col>
          </el-row>

        </template>
      </el-table-column>
      <!-- 项目组列表 -->
      <el-table-column type="index" min-width="50">
      </el-table-column>
      <el-table-column label="组名" prop="name" min-width="200">
      </el-table-column>
      <el-table-column label="客户名称" prop="customers.customername" min-width="200">
      </el-table-column>
      <el-table-column label="补充事项" prop="buchong" width="400">
        <template slot-scope="scope">
          <el-tooltip placement="top-start" effect="light">
            <div slot="content">{{ scope.row.buchong }}</div>
            <div class="cell">{{ scope.row.buchong }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="400">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="handleClick(scope.$index, scope.row)">查看子项目</el-button>
          <el-button size="small" type="primary" @click="handleAddUsers(scope.$index, scope.row)"> 新增项目负责人</el-button>
          <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button @click.native.prevent="handleDel(scope.$index, scope.row)" icon="el-icon-delete" size="small" type="danger"> </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--编辑主项目界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" :rules="editFormRules" label-width="110px" ref="editForm">
        <el-form-item label="所属客户" prop="customerid">
          <el-select v-model="editForm.customerid" auto-complete="off">
            <el-option v-for="item in customerlist" :key="item.customerid" :label="item.customername" :value="item.customerid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" width="100%" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="补充事项" width="100%" prop="buchong">
          <el-input type="textarea" v-model="editForm.buchong"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--新增主项目界面-->
    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="addForm" :rules="addFormRules" ref="addForm">
        <el-form-item label="选择客户" prop="customerid">
          <el-select v-model="addForm.customerid" placeholder="请选择客户" clearable @change="CustomerChange">
            <el-option v-for="item in customerlist" :key="item.customerid" :label="item.customername" :value="item.customerid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目组名" width="100%" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="补充事项" width="100%" prop="buchong">
          <el-input type="textarea" v-model="addForm.buchong"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--编辑项目负责人界面-->
    <el-dialog title="编辑项目负责人" :visible.sync="editUsersFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="editUsersForm" :rules="editUsersFormRules" ref="editusersform">
        <el-form-item label="人员" width="100%" prop="renyuan">
          <el-input v-model="editUsersForm.renyuan"></el-input>
        </el-form-item>
        <el-form-item label="姓名" width="100%" prop="xingming">
          <el-input v-model="editUsersForm.xingming"></el-input>
        </el-form-item>
        <el-form-item label="公司" width="100%" prop="company">
          <el-input v-model="editUsersForm.company"></el-input>
        </el-form-item>
        <el-form-item label="选择职务" prop="zhiwei">
          <el-select v-model="editUsersForm.zhiwei" placeholder="请选择职务" clearable @change="zhiweiChange">
            <el-option v-for="item in zhiweitypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择职责" prop="zhize">
          <el-select v-model="editUsersForm.zhize" placeholder="请选择职责" clearable @change="zhizeChange">
            <el-option v-for="item in zhizetypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editUsersFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editUserSubmit" :loading="editUsersLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--新增项目负责人界面-->
    <el-dialog title="新增项目负责人" :visible.sync="addUsersFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="addUsersForm" :rules="addUsersFormRules" ref="addusersform">
        <el-form-item label="人员" width="100%" prop="renyuan">
          <el-input v-model="addUsersForm.renyuan"></el-input>
        </el-form-item>
        <el-form-item label="姓名" width="100%" prop="xingming">
          <el-input v-model="addUsersForm.xingming"></el-input>
        </el-form-item>
        <el-form-item label="公司" width="100%" prop="company">
          <el-input v-model="addUsersForm.company"></el-input>
        </el-form-item>
        <el-form-item label="选择职务" prop="zhiwei">
          <el-select v-model="addUsersForm.zhiwei" placeholder="请选择职务" clearable @change="zhiweiChange">
            <el-option v-for="item in zhiweitypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择职责" prop="zhize">
          <el-select v-model="addUsersForm.zhize" placeholder="请选择职责" clearable @change="zhizeChange">
            <el-option v-for="item in zhizetypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addUsersFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addUserSubmit" :loading="addUsersLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import NProgress from "nprogress";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      filters: {
        name: ""
      },
      total: 0,
      page: 1,
      getProjectsList: [],
      listLoading: false,
      customerlist: [],
      zhiweitypes: [
        {
          label: "企业质量负责人",
          value: "0"
        },
        {
          label: "质管部负责人",
          value: "1"
        },
        {
          label: "储运部负责人",
          value: "2"
        },
        {
          label: "质管员",
          value: "3"
        },
        {
          label: "养护员",
          value: "4"
        },
        {
          label: "设备管理人员",
          value: "5"
        },
        {
          label: "运输配送人员",
          value: "6"
        },
        {
          label: "验证工程师",
          value: "7"
        }
      ], //职位下拉框
      zhizetypes: [
        {
          label: "负责验证工作的督导、指导、协调与审批。负责验证方案和报告的批准。",
          value: "0"
        },
        {
          label: "负责组织仓储，运输等部门共同实施验证工作。负责验证方案和报告的审核。",
          value: "1"
        },
        {
          label: "配合实施验证工作。",
          value: "2"
        },
        {
          label: "负责验证布点、数据采集，以及验证方案、验证报告的起草和出具。",
          value: "3"
        }
      ], //职责下拉框

      editLoading: false,
      editFormVisible: false, //编辑界面是否显示
      editFormRules: {
        name: [
          {
            required: true,
            message: "请输入项目组名",
            trigger: "blur"
          }
        ],
        customerid: []
      },
      editForm: {
        name: "",
        buchong: "",
        customerid: null
      },

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addForm: {
        name: "",
        buchong: "",
        customerid: null
      },
      addFormRules: {
        name: [
          {
            required: true,
            message: "请输入项目组名",
            trigger: "blur"
          }
        ],
        customerid: [
          {
            //type: "array",
            required: true,
            message: "请选择所属客户",
            trigger: "change"
          }
        ]
      },
      editUsersForm: {
        renyuan: "",
        xingming: "",
        company: "",
        zhiwei: "",
        zhize: ""
      },
      editUsersLoading: false,
      editUsersFormVisible: false, //责任人新增界面是否显示
      editUsersFormRules: {
        renyuan: [
          {
            required: true,
            message: "请输入负责人人员",
            trigger: "blur"
          }
        ],
        company: [
          {
            required: true,
            message: "请输入负责人公司",
            trigger: "blur"
          }
        ],
        xingming: [
          {
            required: true,
            message: "请输入负责人姓名",
            trigger: "blur"
          }
        ],
        zhiwei: [
          {
            required: true,
            message: "请选择负责人职务",
            trigger: "change"
          }
        ],
        zhize: [
          {
            required: true,
            message: "请选择负责人职责",
            trigger: "change"
          }
        ]
      },
      addUsersForm: {
        renyuan: "",
        xingming: "",
        company: "",
        zhiwei: "",
        zhize: ""
      },
      addUsersLoading: false,
      addUsersFormVisible: false, //责任人新增界面是否显示
      addUsersFormRules: {
        renyuan: [
          {
            required: true,
            message: "请输入负责人人员",
            trigger: "blur"
          }
        ],
        company: [
          {
            required: true,
            message: "请输入负责人公司",
            trigger: "blur"
          }
        ],
        xingming: [
          {
            required: true,
            message: "请输入负责人姓名",
            trigger: "blur"
          }
        ],
        zhiwei: [
          {
            required: true,
            message: "请选择负责人职务",
            trigger: "change"
          }
        ],
        zhize: [
          {
            required: true,
            message: "请选择负责人职责",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["roletype"])
  },

  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getProjects();
    },
    formatZhiwei(row) {
      switch (row.zhiwei) {
        case "0":
          return "企业质量负责人";
          break;
        case "1":
          return "质管部负责人";
          break;
        case "2":
          return "储运部负责人";
          break;
        case "3":
          return "质管员";
          break;
        case "4":
          return "养护员";
          break;
        case "5":
          return "设备管理人员";
          break;
        case "6":
          return "运输配送人员";
          break;
        case "7":
          return "验证工程师";
      }
    },
    formatZhize(row){
      switch (row.zhize) {
        case "0":
          return "负责验证工作的督导、指导、协调与审批。负责验证方案和报告的批准。";
          break;
        case "1":
          return "负责组织仓储，运输等部门共同实施验证工作。负责验证方案和报告的审核。";
          break;
        case "2":
          return "配合实施验证工作。";
          break;
        case "3":
          return "负责验证布点、数据采集，以及验证方案、验证报告的起草和出具";
      }

    },

    CustomerChange(selected) {},

    zhiweiChange(selected) {
      Object.assign(this.addUsersForm, this.zhiweitypes[selected]);
    },
    zhizeChange(selected) {
      Object.assign(this.addUsersForm, this.zhizetypes[selected]);
    },
    //获取分组列表
    getProjects() {
      this.listLoading = true;
      NProgress.start();
      this.axios
        .get("/groups", {
          params: {
            page: this.page,
            pagesize: 10,
            customername: this.filters.name
          }
        })
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.total = reply.data.data.total;
            this.getProjectsList = reply.data.data.list;
          } else {
            this.$message({
              message: `查询出错6，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },

    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该项目组吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        this.axios
          .post("/groups/delete", {
            groupid: row.groupid
          })
          .then(reply => {
            this.listLoading = false;
            NProgress.done();
            if (reply.data.status === 0) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success"
              });
              this.getProjects();
            } else {
              this.$message({
                message: `删除失败，错误码${reply.data.status},请联系管理员`,
                type: "warning"
              });
            }
          });
      });
    },
    //显示编辑组界面
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign(this.editForm, row);
    },
    //进入子项目
    handleClick(index, row) {
      this.$router.push({
        path: "/Project/SubProjects/" + row.groupid
      });
    },
    //显示新增组界面
    handleAdd: function() {
      this.addFormVisible = true;
      this.addForm = {
        customerid: null,
        name: ""
      };
    },
    //显示负责人新增界面
    handleAddUsers(index, row) {
      this.addUsersFormVisible = true;
      this.addUsersForm = Object.assign({}, this.addUsersForm, row, {
        renyuan: "",
        xingming: "",
        company: "",
        zhiwei: "",
        zhize: ""
      });
    },
    //显示负责人编辑界面
    handleEditUsers(index, row) {
      this.editUsersFormVisible = true;
      this.editUsersForm = Object.assign(this.editUsersForm, row);
    },
    //编辑项目组
    editSubmit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            NProgress.start();
            let params = {};
            Object.assign(params, this.editForm);
            Object.assign(params, {
              customerid: this.customerid
            });
            this.axios.post("/groups/update", params).then(reply => {
              this.editLoading = false;
              NProgress.done();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "编辑成功",
                  type: "success"
                });
                this.$refs["editForm"].resetFields();
                this.editFormVisible = false;
                this.getProjects();
              } else {
                this.$message({
                  message: `保存失败，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
          });
        }
      });
    },
    //新增项目组
    addSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {
            type: "warning"
          }).then(() => {
            this.addLoading = true;
            NProgress.start();
            let params = {
              customerid: this.customerid
            };
            Object.assign(params, this.addForm);
            this.axios.post("/groups", params).then(reply => {
              this.addLoading = false;
              NProgress.done();
              this.$refs["addForm"].resetFields();
              this.addFormVisible = false;
              this.getProjects();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success"
                });
              } else {
                //console.log(JSON.stringify(reply.data));
                this.$message({
                  message: `保存出错，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
          });
        }
      });
    },
    //负责人新增界面
    addUserSubmit() {
      this.$refs.addusersform.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.addUsersLoading = true;
            NProgress.start();
            let params = {
              groupid: this.addUsersForm.groupid,
              renyuan: this.addUsersForm.renyuan,
              xingming: this.addUsersForm.xingming,
              company: this.addUsersForm.company,
              zhiwei: this.addUsersForm.zhiwei,
              zhize: this.addUsersForm.zhize
            };
            this.axios.post("/groupmembers", params).then(reply => {
              this.addUsersLoading = false;
              NProgress.done();
              this.$refs["addusersform"].resetFields();
              this.addUsersFormVisible = false;
              this.getProjects();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success"
                });
              } else {
                //console.log(JSON.stringify(reply.data));
                this.$message({
                  message: `保存出错，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
          });
        }
      });
    },
    //负责人编辑界面
    editUserSubmit() {
      this.$refs.editusersform.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editUsersLoading = true;
            NProgress.start();
            let params = {};
            Object.assign(params, this.editUsersForm);
            this.axios.post("/groupmembers/update", params).then(reply => {
              this.editUsersLoading = false;
              NProgress.done();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "编辑成功",
                  type: "success"
                });
                this.$refs["editusersform"].resetFields();
                this.editUsersFormVisible = false;
                this.getProjects();
              } else {
                this.$message({
                  message: `保存失败，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
          });
        }
      });
    },
    //删除负责人
    handleUserDel: function(index, row) {
      this.$confirm("确认删除该负责人吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        this.axios
          .post("/groupmembers/delete", {
            memberid: row.memberid
          })
          .then(reply => {
            this.listLoading = false;
            NProgress.done();
            if (reply.data.status === 0) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success"
              });
              this.getProjects();
            } else {
              this.$message({
                message: `删除失败，错误码${reply.data.status},请联系管理员`,
                type: "warning"
              });
            }
          });
      });
    }
  },
  mounted() {
    this.getProjects();
    this.axios.get("/customers/list", { params: {} }).then(reply => {
      this.customerlist = reply.data.data;
    });
  }
};
</script>
<style  scoped>
.subtab_tit {
  text-align: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
  line-height: 23px;
  overflow: hidden; /*溢出隐藏*/
  text-overflow: ellipsis; /*文本溢出省略号*/
  white-space: nowrap; /*不换行*/
}
</style>
